<template>
  <div>
    <!-- 身份验证 -->
    <el-dialog
        v-model="showVerifyEditDialog"
        :title="`身份验证`"
        width="450px"
    >
      <div>
        <!-- 第1步 验证密码 -->
        <div class="accoun-step1">
          <el-form
              ref="verifyStepForm1Ref"
              :model="verifyStepForm1"
              :rules="verifyStep1Rule"
              label-position="top"
          >
            <el-form-item prop="verify" label="提示">
              <div class="field">
                <div class="ui message yellow">
                {{`你正在进行敏感操作，继续操作前请验证您的身份`}}
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="password" label="密码验证">
              <el-input
                v-model="verifyStepForm1.password"
                type="password"
                size="large"
                placeholder="请输入当前账号密码"
                show-password
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleCheckVerifyStep1(verifyStepForm1Ref)">
              确认
            </el-button>
            <el-button @click="showVerifyEditDialog = false">取消</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed, reactive } from 'vue'
import { useStore } from 'vuex'
import { userPasswordAuth } from "@/api/user"
import { ElMessage } from "element-plus"

const store = useStore()
/******************身份验证 start********************/
const verifyPassed = computed(() => {
  return store.state.user.verifyPassed
})
const verifyStepForm1Ref = ref()
const verifyStep1Rule = reactive({
  password:  [{ required: true, message: '请输入当前账号密码', trigger: 'blur' },],
})
const defaultVerifyStepForm1 = {
  password: '', //密码
}
const verifyStepForm1 = reactive(Object.assign({},defaultVerifyStepForm1))
const showVerifyEditDialog = ref(false)
// 打开修改账号框
const openVerify = () => {
  if(verifyStepForm1Ref.value){
    verifyStepForm1Ref.value.resetFields()
  }
  Object.assign(verifyStepForm1, defaultVerifyStepForm1)
  showVerifyEditDialog.value = true
}
// 操作验证时，记录当前是哪项操作,验证完成后继续执行
let curFun = null
let curFunArgs = null
const handleCheckVerify = (fun, args) => {
  if(!verifyPassed.value){ //身份验证
    curFun = fun
    curFunArgs = args
    openVerify()
  }
  return verifyPassed.value ? true : false
}
const doCurPlay = (fun) => {
  return function () {
    fun(...arguments)
  }
}
const handleCheckVerifyStep1 = async (formEl) => {
  if(!formEl) return
  await formEl.validate(async (valid) => {
    if(valid) {
      let res = await userPasswordAuth({password: verifyStepForm1.password})
      if(res.code == 20000){
        showVerifyEditDialog.value = false
        store.state.user.verifyPassed = true
        ElMessage({
          showClose: true,
          message: '验证通过',
          type: 'success',
        })
        //验证成功后执行之前记录的操作
        let fun = doCurPlay(curFun)
        fun(curFunArgs)
      }else{
        ElMessage({
          showClose: true,
          message: '密码错误，请重新输入',
          type: 'warning',
        })
      }
    }
  })
}
 /******************身份验证 end********************/
// 暴露方法
defineExpose({
  handleCheckVerify
})
</script>
<style scoped lang='scss'>
.field{
  width: 95%;
  .ui.yellow.message {
    width: 100%;
    padding: 5px 10px;
    background-color: #FFF8DB;
    color: #B58105;
    -webkit-box-shadow: 0px 0px 0px 1px #b58105 inset, 0px 0px 0px 0px rgba(0,0,0,0);
    box-shadow: 0px 0px 0px 1px #b58105 inset, 0px 0px 0px 0px rgba(0,0,0,0);
  }
}
</style>